<template>
	<view class="container">
		<header-view type="second" leftShow rightShow>
			<text>{{info.name}}</text>
			<text class="tag">{{info.code}}</text>
		</header-view>
		<view class="content">
			<view class="top flex">
				<view class="price col_center" :class="info.gain>0?'green':'red'">
					<view class="price_detail">{{info.price}}</view>
					<view class="price_status" :class="info.gain>0?'bg_green':'bg_red'">
						<text>{{info.gainvalue}}</text>
						<text>{{info.gain}}%</text>
					</view>
				</view>
				<view class="list flex_between">
					<view class="item flex_between">
						<text class="name">{{$t('开盘价')}}</text><text>{{info.open}}</text>
					</view>
					<view class="item flex_between">
						<text class="name">{{$t('闭盘价')}}</text><text>{{info.preClose}}</text>
					</view>
					<view class="item flex_between">
						<text class="name">{{$t('高')}}</text><text>{{info.high}}</text>
					</view>
					<view class="item flex_between">
						<text class="name">{{$t('低')}}</text><text>{{info.low}}</text>
					</view>
					<view class="item flex_between">
						<text class="name">{{$t('总量')}}</text><text>{{info.amount}}</text>
					</view>
					<view class="item flex_between">
						<text class="name">{{$t('总额')}}</text><text>{{info.volume}}</text>
					</view>
				</view>
			</view>
			<kline :id="id"></kline>
			<view class="bottom">
				<view class="title flex">
					<image src="../../static/img/top.png" style="width: 18px;height: 16px;margin-right: 5px"></image>
					<text>{{$t('最新的买卖记录')}}</text>
				</view>
				<view class="list flex_between">
					<view class="list_item">
						<view class="list_title bg_green">{{$t('购买')}}</view>
						<view class="item flex_between" v-for="(item,index) in upList">
							<view class="name">{{$t('买')}}{{index+1}}</view>
							<view class="item_price green">{{item.buyprice}}</view>
							<view class="inner"></view>
						</view>
					</view>
					<view class="list_item">
						<view class="list_title bg_red">{{$t('出售')}}</view>
						<view class="item flex_between" v-for="(item,index) in downList">
							<view class="name">{{$t('卖')}}{{index+1}}</view>
							<view class="item_price red">{{item.buyprice}}</view>
							<view class="inner"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="option flex_between">
			<view class="buttons flex_between">
				<view class="button bg_green" @tap="buySell('long')">{{$t('买多')}}</view>
				<view class="button bg_red" style="margin-left: 20rpx;" @tap="buySell('short')">{{$t('买空')}}</view>
			</view>
			<view class="opt_icon" @tap="addMy">
				<uni-icons v-if="info.is_zixuan==0" type="plus" size="36" color="#9984dc"></uni-icons>
				<uni-icons v-if="info.is_zixuan==1" type="minus" size="36" color="#9984dc"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import headerView from "@/components/headerView/index.vue"
	import kline from "@/components/kline/index.vue"
	import {
		stockDetailApi,
		stockRealOrderApi,
		stockAddMyApi
	} from "@/api/api.js"
	export default {
		components: {
			headerView,
			kline
		},
		data() {
			return {
				id: "",
				info: {},
				upList: [],
				downList: []
			};
		},
		onLoad(opt) {
			this.id = opt.id
			this.getDetail()
			this.getRealOrder()
		},
		methods: {
			getDetail() {
				stockDetailApi({
					id: this.id
				}).then(res => {
					console.log(res.data.data)
					this.info = res.data.data
				})
			},
			getRealOrder() {
				stockRealOrderApi({
					pro_id: this.id
				}).then(res => {
					console.log(res.data.data)
					this.upList = res.data.data.up
					this.downList = res.data.data.down
				})
			},
			buySell(key) {
				/*
				long 买多
				short 买空
				*/
				uni.navigateTo({
					url: "/pages/detail/buySell?type=" + key + "&id=" + this.id
				})
			},
			addMy() {
				stockAddMyApi({
					id: this.id
				}).then(res => {
					console.log(res.data.data)
					if (this.info.is_zixuan == 0) {
						uni.$u.toast(this.$t('添加自选成功'))
						this.info.is_zixuan = 1
					} else {
						uni.$u.toast(this.$t('取消自选'))
						this.info.is_zixuan = 0
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		padding-bottom: 0;

		.tag {
			height: 32rpx;
			background: #c62f1f;
			padding: 0 5rpx;
			font-size: 14px;
			font-weight: 400;
			color: #fff;
			margin-left: 8rpx;
			border-radius: 4rpx;
		}

		.content {
			flex: 1;
			overflow: auto;
			padding-bottom: 20rpx;

			.top {
				height: 250rpx;
				border-bottom: 2rpx solid #151630;
				border-top: 2rpx solid #151630;
				padding: 0 24rpx;

				.price {
					width: 270rpx;
					height: 100%;
					margin-right: 26rpx;

					.price_detail {
						font-size: 60rpx;
						font-weight: 700;
					}

					.price_status {
						height: 32rpx;
						line-height: 32rpx;
						border-radius: 16rpx;
						margin-top: 14rpx;
						font-size: 22rpx;
						font-weight: 400;
						color: #fff;

						uni-text {
							padding: 0 20rpx;
						}
					}
				}

				.list {
					flex: 1;
					flex-wrap: wrap;

					.item {
						width: 48%;
						font-size: 24rpx;
						font-weight: 400;
						color: #fff;

						height: 32px;

						.name {
							color: #999;
							padding-right: 20rpx;
						}
					}
				}
			}

			.bottom {
				padding: 0 24rpx;

				.title {
					height: 120rpx;
					font-size: 34rpx;
					font-weight: 700;
					color: #9984dc;
					padding: 0 24rpx;
				}

				.list {
					align-items: flex-start;

					.list_item {
						width: 47%;

						.list_title {
							height: 56rpx;
							font-size: 32rpx;
							font-weight: 400;
							color: #fff;
							text-align: center;
							line-height: 56rpx;
							border-radius: 4rpx;
						}

						.item {
							height: 50rpx;
							font-size: 30rpx;
							font-weight: 500;
							color: #666;

						}


					}

					.list_item:first-child {
						.item {
							.inner {
								height: 24rpx;
								background: rgba(0, 170, 112, .2);
								padding: 0 10rpx;
							}
						}
					}

					.list_item:nth-child(2) {
						.item {
							.inner {
								height: 24rpx;
								background: rgba(226, 38, 36, .2);
								padding: 0 10rpx;
							}
						}
					}
				}
			}
		}

		.option {
			width: 100%;
			height: 100rpx;
			background: #1f2039;
			border-radius: 28rpx 28rpx 0 0;
			padding: 0 24rpx;

			.buttons {

				.button {
					width: 280rpx;
					height: 80rpx;
					border-radius: 40rpx;
					font-size: 40rpx;
					font-family: FZCuHei-B03T;
					font-weight: 400;
					color: #fffbf5;
					text-align: center;
					line-height: 80rpx;
				}
			}
		}
	}
</style>